<template>
  <div class="main">
    <div class="resutDetailWrap">
      <div class="back topBackWrap">
        <!-- <go-back aa="../evaluation/reportRecord" :goes="false"></go-back> -->
        <go-back :goes="false"></go-back>
        <h2>综合测评结果详情</h2>
      </div>
      <div class="reuDelWrap">
        <scroller style="top: 1.6rem;">
          <div class="reuWrap">
            <div class="reuBoxs">
              <div class="reu1">
                <span>生涯测评结果汇总</span>
              </div>
              <div class="reu2 flex-h" @click="goesResult(1,itemDatas.interestSet)">
                <span class="sp1">
                  <img src="~/static/iconsvgs/college_icon_roll.png" alt />
                  <b>职业兴趣测试</b>
                  <i v-show="interestResult.length>1">{{interestResult.length}}</i>
                </span>
                <span class="sp2">{{interestResult[0]}}</span>
              </div>
              <div class="reu2 flex-h" @click="goesResult(4,itemDatas.intelligenceSet)">
                <span class="sp1">
                  <img src="~/static/iconsvgs/college_icon_roll.png" alt />
                  <b>多元智能测试</b>
                  <i v-show="intelligenceResult.length>1">{{intelligenceResult.length}}</i>
                </span>
                <span class="sp2">{{intelligenceResult[0]}}</span>
              </div>
              <div class="reu2 flex-h" @click="goesResult(2,itemDatas.worthSet)">
                <span class="sp1">
                  <img src="~/static/iconsvgs/college_icon_roll.png" alt />
                  <b>职业价值观测试</b>
                  <i v-show="worthResult.length>1">{{worthResult.length}}</i>
                </span>
                <span class="sp2">{{worthResult[0]}}</span>
              </div>
              <div class="reu2 flex-h" @click="goesResult(3,itemDatas.characterSet)">
                <span class="sp1">
                  <img src="~/static/iconsvgs/college_icon_roll.png" alt />
                  <b>MBTI性格测试</b>
                </span>
                <span class="sp2">{{characterResult[0]}}</span>
              </div>
              <div class="reu2 flex-h" @click="goesResult(5,itemDatas.grownSet)">
                <span class="sp1">
                  <img src="~/static/iconsvgs/college_icon_roll.png" alt />
                  <b>成长环境测试</b>
                  <i v-show="grownResult.length>1">{{grownResult.length}}</i>
                </span>
                <span class="sp2">{{grownResult[0]}}</span>
              </div>
            </div>
            <div class="reubotBox">
              <div v-if="delDataLength>0">
                <div class="bot1 flex-h" @click="goMoreResult('moreResult','major')">
                  <span class="sp1 flex1">推荐专业</span>
                  <span class="sp2">
                    <b>更多</b>
                    <img src="~/static/iconsvgs/rightsy.png" alt />
                  </span>
                </div>
                <div class="tabs-wrapper">
                  <div class="tabs flex-h">
                    <span :class="['flex1',majorTabIndex===1?'active':'']" @click="tabs(1)">匹配度高</span>
                    <span :class="['flex1',majorTabIndex===2?'active':'']" @click="tabs(2)">匹配度一般</span>
                    <span :class="['flex1',majorTabIndex===3?'active':'']" @click="tabs(3)">匹配度低</span>
                  </div>
                </div>
                <div>
                  <div class="box-wrapper">
                    <div
                      class="botBox2 flex-h"
                      v-for="(item,$index) in delData"
                      :key="$index"
                      @click="gotoMajor('/professional/majorList', item.major)"
                    >
                      <span class="sp1">
                        <b></b>
                      </span>
                      <span class="flex1 sp2">
                        <b>{{item?item.major:''}}</b>
                        <i>{{item?item.category:''}}</i>
                      </span>
                      <span class="sp3">
                        <b>{{item?item.score:''}}</b>
                        <img src="~/static/iconsvgs/rightsy.png" alt />
                      </span>
                    </div>
                    <div class="no-data" v-if="delData.length===0">暂无相关匹配专业</div>
                  </div>
                  <div class="more" @click="goMoreResult('moreResult','major')">
                    <span>查看更多</span>
                    <img src="~/static/iconsvgs/rightsy.png" alt />
                  </div>
                </div>
              </div>

              <div v-if="industryDataLength>0">
                <div class="bot1 flex-h" @click="goMoreResult('moreResult','jobs')">
                  <span class="sp1 flex1">推荐职位</span>
                  <span class="sp2">
                    <b>更多</b>
                    <img src="~/static/iconsvgs/rightsy.png" alt />
                  </span>
                </div>
                <div class="tabs-wrapper">
                  <div class="tabs flex-h">
                    <span :class="['flex1',majorJobIndex===1?'active':'']" @click="tabJobs(1)">匹配度高</span>
                    <span :class="['flex1',majorJobIndex===2?'active':'']" @click="tabJobs(2)">匹配度一般</span>
                    <span :class="['flex1',majorJobIndex===3?'active':'']" @click="tabJobs(3)">匹配度低</span>
                  </div>
                </div>
                <div>
                  <div class="box-wrapper">
                    <div
                      class="botBox2 flex-h"
                      v-for="(item,$index) in industryData"
                      :key="$index"
                      @click="gotoJobs('/jobs/jobList', item.position)"
                    >
                      <span class="sp1">
                        <b></b>
                      </span>
                      <span class="flex1 sp2">
                        <b style="line-height: 0.9rem;">{{item?item.position:''}}</b>
                      </span>
                      <span class="sp3">
                        <b>{{item?item.score:''}}</b>
                        <img src="~/static/iconsvgs/rightsy.png" alt />
                      </span>
                    </div>
                    <div class="no-data" v-if="industryData.length===0">暂无相关匹配职位</div>
                  </div>
                  <div class="more" @click="goMoreResult('moreResult','jobs')">
                    <span>查看更多</span>
                    <img src="~/static/iconsvgs/rightsy.png" alt />
                  </div>
                </div>
              </div>
              <div class="footer">
                <div class="bot1 flex-h">
                  <span class="sp1 flex1">推荐服务</span>
                </div>
                <img class="footbanner" src="~@/static/images/banner_pic_tuijianfuwu.png" alt />
                <h2>生涯规划1V1个性化咨询服务</h2>
                <span class="times">工作日 9：00-17：30</span>
                <span class="foot-btn" @click="appCallPhone">人工服务热线</span>
              </div>
            </div>
            <div style="width: 100%;height: 1.6rem;"></div>
          </div>
        </scroller>
      </div>
    </div>
  </div>
</template>
<script>
import ls from "store2";
import { format } from "~/plugins/filter";
import goBack from "~/components/goBack";
import reportList from "~/components/reportList";
import { getReportDetails } from "~/api/evaluation";
import { getmajorlistbyname } from "~/api/repository";
export default {
  head: {
    title: "生涯测评"
  },
  components: {
    goBack,
    reportList
  },
  data() {
    return {
      majorTabIndex: 1,
      majorJobIndex: 1,
      itemDatas: [],
      delData: [],
      delDataLength: 0,
      industryData: [],
      industryDataLength: 0,
      strText: "",
      proSuggest: [],
      interestResult: [],
      intelligenceResult: [],
      worthResult: [],
      characterResult: [],
      grownResult: []
    };
  },
  mounted: function() {
    this.showZhResultList();
    ls.set("preUrl", "../evaluation/resultDetails");
  },

  created() {
    // this.commonJs.gologins();
  },
  watch: {},
  methods: {
    appCallPhone() {
      let telephone = "027-88161985";
      var terminal = this.commonJs.checkTerminal();
      if (terminal === "ios") {
        window.webkit.messageHandlers.CallTelephone.postMessage(telephone);
      } else if (terminal === "android") {
        ZMParentsJsToAndroid.CallTelephone(telephone); //eslint-disable-line
      } else if (terminal === "wechat") {
        window.location.href = "tel://" + telephone;
      } else {
        window.location.href = "https://app.sx985.com/download";
      }
    },

    goMoreResult(paths, querys) {
      this.commonJs.gosto(paths);
      sessionStorage.setItem("resultQuery", querys);
    },
    goesResult(para, parb) {
      console.log('parb: ', parb);
      let arrs = JSON.parse(parb);
      console.log('arrs: ', arrs);
      let obj = {
        status: para,
        worthScore: arrs
      };
      ls.set("resultPar", obj);
      ls.set("preUrl", "../evaluation/resultDetails");
      this.commonJs.gopush("chiResult");
    },
    goesResu(item) {
      let sxr;
      switch (item.type) {
        case 1:
          sxr = 1;
          break;
        case 2:
          sxr = 4;
          break;
        case 3:
          sxr = 2;
          break;
        case 4:
          sxr = 3;
          break;
        case 5:
          sxr = 5;
          break;
        default:
          break;
      }

      let arrs = JSON.parse(item.characterSet);
      let obj = {
        status: sxr,
        worthScore: arrs
      };
      ls.set("resultPar", obj);
      this.commonJs.gosto("chiResult");
    },
    showZhResultList() {
      this.$vux.loading.show();
      let ids = ls.get("zhId") * 1;
      getReportDetails(ids)
        .then(res => {
          if (res.code === "0") {
            this.itemDatas = res.data.evaluationVo;
            let resuletData = res.data.evaluationVo;
            this.interestResult = resuletData.interest.split("+");
            this.intelligenceResult = resuletData.intelligence.split("+");
            this.worthResult = resuletData.worth.split("+");
            this.characterResult = resuletData.character.split("+");
            this.grownResult = resuletData.grown.split("+");
            // 专业
            let majordata = res.data.majorScoreVo;
            this.high = [];
            this.middle = [];
            this.low = [];
            majordata.forEach((item, index) => {
              if (item.score > 6.8) {
                this.high.push(item);
              } else if (
                (item.score > 2.1 || item.score === 2.1) &&
                (item.score < 6.8 || item.score === 6.8)
              ) {
                this.middle.push(item);
              } else {
                this.low.push(item);
              }
            });
            this.high = this.arrFilter(this.high);
            this.middle = this.arrFilter(this.middle);
            this.low = this.arrFilter(this.low);
            this.delData = this.high;
            this.delDataLength = majordata.length;

            //职位
            let workData = res.data.positionScoreVo;
            this.industryDataLength = workData.length;
            this.highJob = [];
            this.middleJob = [];
            this.lowJob= [];
            workData.forEach((item, index) => {
              if (item.score > 6.8) {
                this.highJob.push(item);
              } else if (
                (item.score > 2.1 || item.score === 2.1) &&
                (item.score < 6.8 || item.score === 6.8)
              ) {
                this.middleJob.push(item);
              } else {
                this.lowJob.push(item);
              }
            });
            this.highJob = this.arrFilter(this.highJob);
            this.middleJob = this.arrFilter(this.middleJob);
            this.lowJob = this.arrFilter(this.lowJob);
            this.industryData = this.highJob
            this.$vux.loading.hide();
          }
        })
        .catch(error => {
          this.$vux.loading.hide();
        });
    },
    arrFilter(arr) {
      if (arr.length > 3) {
        arr = arr.filter(function(item, index) {
          return index < 3;
        });
      } else {
        arr = arr;
      }
      return arr;
    },
    tabs(index) {
      this.majorTabIndex = index;
      if (index === 1) {
        this.delData = this.high;
      } else if (index === 2) {
        this.delData = this.middle;
      } else {
        this.delData = this.low;
      }
    },
    tabJobs(index) {
      this.majorJobIndex = index;
       if (index === 1) {
        this.industryData = this.highJob;
      } else if (index === 2) {
        this.industryData = this.middleJob;
      } else {
        this.industryData = this.lowJob;
      }

    },
    gotoJobs(routerName, jobName){
      this.$router.push({
        path: routerName,
        query:{jobName:jobName}
      })
    },
    gotoMajor(routerName, queryData) {
      this.catalogName = this.$store.state.sendMsg;
      getmajorlistbyname({
        catalog_name: queryData
      }).then(res => {
        if (res.code == 200) {
          const data = res.data[0];
          if (data) {
            let catalogData = {
              catalog_name: data.catalog_name,
              catalog_code: data.catalog_code,
              majors: data.majors
            };
            ls.set("catalogMsg", catalogData);
            ls.set("preUrlEvaluation", "../evaluation/resultDetails");
            // this.$router.push({ path: routerName });
             this.$router.push({ path: routerName+"?type="+data.catalog_name });
          } else {
            this.$vux.toast.text("抱歉该专业没有对应详情");
          }
        } else {
          this.$vux.toast.text("抱歉该专业没有对应详情");
        }
      });
    }
  },
  beforeDestroy() {}
};
</script>  

<style scoped lang="less">
.resutDetailWrap {
  width: 7.5rem;
  height: 100vh;

  .reuDelWrap {
    width: 7.5rem;
    height: auto;

    .reuWrap {
      width: 100%;
      height: auto;
      padding: 0.3rem 0.3rem 0;
      box-sizing: border-box;

      .reuBoxs {
        width: 100%;
        height: auto;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 0px 0.2rem 0px rgba(204, 204, 204, 0.3);
        border-radius: 0.2rem;
        padding: 0.3rem 0.3rem 0.5rem;
        box-sizing: border-box;

        .reu1 {
          height: 0.4rem;
          line-height: 0.4rem;

          span {
            font-size: 0.26rem;
            font-weight: bold;
            color: rgba(187, 187, 187, 1);
          }
        }

        .reu2 {
          span {
            height: 0.9rem;
            line-height: 0.9rem;
          }

          .sp1 {
            // flex: 3;

            img {
              width: 0.22rem;
              height: 0.22rem;
              vertical-align: middle;
            }

            b {
              vertical-align: middle;
              font-size: 0.3rem;
              margin-left: 0.15rem;
              font-weight: bold;
              color: rgba(34, 34, 34, 1);
              line-height: 42px;
            }

            i {
              vertical-align: middle;
              display: inline-block;
              width: 0.4rem;
              height: 0.4rem;
              background: rgba(247, 247, 250, 1);
              border-radius: 0.2rem;
              text-align: center;
              line-height: 0.4rem;
              margin-left: 0.1rem;
              font-size: 0.26rem;
              font-family: "PingFangSC-Semibold";
              font-weight: 600;
              color: rgba(199, 199, 199, 1);
            }
          }

          .sp2 {
            flex: 1;
            // height:42px;
            font-size: 0.3rem;
            text-align: right;
            font-weight: bold;
            color: @mainColor;
            // line-height:42px;
          }
        }
      }

      .reubotBox {
        padding: 0 0.3rem 0.3rem;
        box-sizing: border-box;
        margin-top: 0.3rem;
        width: 100%;
        height: auto;
        background: rgba(255, 255, 255, 1);
        border-radius: 0.2rem;

        .bot1 {
          padding: 0.5rem 0.2rem 0.3rem 0.2rem;
          // border-bottom: 0.01rem solid rgba(238, 238, 238, 1);

          .sp1 {
            font-size: 0.34rem;

            font-weight: bold;
            color: rgba(34, 34, 34, 1);
          }

          .sp2 {
            b {
              font-size: 0.26rem;
              color: rgba(34, 34, 34, 1);
              vertical-align: middle;
            }

            img {
              width: 0.3rem;
              height: auto;
              vertical-align: middle;
              margin-left: 0.05rem;
            }
          }
        }
        .box-wrapper {
          height: 5.4rem;
        }
        .more {
          height: 1rem;
          line-height: 1rem;
          text-align: center;
          span {
            font-size: 0.24rem;
            font-family: PingFangSC;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            vertical-align: middle;
          }
          img {
            width: 0.4rem;
            height: 0.4rem;
            vertical-align: middle;
            margin-left: 0.1rem;
          }
        }
        .botBox2 {
          margin-top: 0.3rem;
          width: 100%;
          height: 1.5rem;
          border-radius: 0.1rem;
          padding: 0 0.2rem;

          .sp1 {
            width: 1rem;
            height: 1.5rem;
            overflow: hidden;

            b {
              width: 0.6rem;
              height: 0.6rem;
              display: block;
              margin-top: 0.45rem;
            }

            //
          }

          .sp2 {
            height: 1.5rem;
            padding: 0.3rem 0rem;
            box-sizing: border-box;

            b,
            i {
              display: block;
              height: 0.45rem;
              line-height: 0.45rem;
            }

            b {
              font-size: 0.3rem;
              font-weight: bold;
              color: rgba(34, 34, 34, 1);
            }

            i {
              // width: 78px;
              font-size: 0.26rem;
              font-weight: bold;
              color: rgba(187, 187, 187, 1);
            }
          }

          .sp3 {
            b {
              font-size: 0.4rem;
              vertical-align: middle;
              font-weight: 600;
              color: @mainColor;
            }

            img {
              width: 0.3rem;
              height: auto;
              vertical-align: middle;
              margin-left: 0.05rem;
            }
          }
        }

        .botBox2:nth-of-type(1) {
          background: linear-gradient(
            270deg,
            rgba(255, 239, 174, 1) 0%,
            rgba(255, 252, 226, 1) 100%
          );

          .sp1 {
            b {
              background: url("~/static/iconsvgs/hg1.png") no-repeat;
              background-size: 100% 100%;
            }
          }
        }

        .botBox2:nth-of-type(2) {
          background: linear-gradient(
            270deg,
            rgba(236, 244, 252, 1) 0%,
            rgba(246, 250, 254, 1) 100%
          );

          .sp1 {
            b {
              background: url("~/static/iconsvgs/hg2.png") no-repeat;
              background-size: 100% 100%;
            }
          }
        }

        .botBox2:nth-of-type(3) {
          background: linear-gradient(
            270deg,
            rgba(251, 237, 219, 1) 0%,
            rgba(253, 248, 241, 1) 100%
          );

          .sp1 {
            b {
              background: url("~/static/iconsvgs/hg3.png") no-repeat;
              background-size: 100% 100%;
            }
          }
        }
        .no-data {
          width: 100%;
          height: 5.1rem;
          margin-top: 0.3rem;
          background: linear-gradient(
            270deg,
            rgba(236, 244, 252, 1) 0%,
            rgba(246, 250, 254, 1) 100%
          );
          font-size: 0.3rem;
          font-weight: bold;
          color: #222222;
          text-align: center;
          line-height: 5.1rem;
        }
        .textp {
          width: 100%;
          height: auto;
          padding: 0.2rem 0;
          box-sizing: border-box;

          p {
            font-size: 0.26rem;
            color: rgba(34, 34, 34, 1);
            line-height: 0.4rem;
          }
        }
      }
    }
  }
}

.back {
  width: 100%;
  height: auto;

  h2 {
    padding: 0 0.3rem;
    box-sizing: border-box;
    display: block;
    height: 0.8rem;
    font-size: 0.44rem;

    font-weight: bold;
    color: rgba(255, 255, 255, 1);
    line-height: 0.8rem;
  }
}
.topBackWrap {
  height: 2.4rem;
  width: 100%;
  background: url("~/static/images/synthesize_bg.png") no-repeat;
  background-size: 100% 100%;
  //
}
.tabs-wrapper {
  width: 100%;
  height: 1rem;
  padding: 0 0.2rem;
  box-sizing: border-box;
  .tabs {
    width: 100%;
    height: 0.8rem;
    background: rgba(247, 247, 250, 1);
    border-radius: 0.4rem;
    padding: 0.05rem;
    box-sizing: border-box;
    span {
      text-align: center;
      height: 0.7rem;
      line-height: 0.7rem;
      font-size: 0.26rem;
      font-family: PingFangSC;
      font-weight: 400;
      color: rgba(34, 34, 34, 1);
    }
    .active {
      background: #fff;
      border-radius: 0.35rem;
      color: rgba(128, 213, 102, 1);
      font-weight: 600;
    }
  }
}
.footer {
  .footbanner {
    display: block;
    width: 100%;
    height: 2.6rem;
  }
  h2 {
    line-height: 1rem;
    text-align: center;
    font-size: 0.3rem;
    font-family: PingFangSC;
    font-weight: 600;
    color: rgba(34, 34, 34, 1);
  }
  .times {
    display: block;
    font-size: 0.24rem;
    font-family: PingFangSC;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    line-height: 0.6rem;
    text-align: center;
  }
  .foot-btn {
    display: block;
    width: 100%;
    height: 0.88rem;
    background: rgba(128, 213, 102, 1);
    border-radius: 0.44rem;
    font-size: 0.3rem;
    font-family: PingFangSC;
    font-weight: 600;
    color: rgba(255, 255, 255, 1);
    line-height: 0.88rem;
    text-align: center;
    margin-top: 0.3rem;
    margin-bottom: 1rem;
  }
}
</style>
